<!--商家列表-->
<template>
  <div class="storePromotion">
    <div class="spinner" v-if="$store.state.loadingFlag">
      <div class="spinner-container container1">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
      </div>
      <div class="spinner-container container2">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
      </div>
      <div class="spinner-container container3">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
      </div>
    </div>
    <el-row class="top">
      <el-col :span="24"><span>商家列表</span></el-col>
    </el-row>
    <div class="menu">
      <el-row class="menu-content">
        <el-col :span="12">
          <div style="padding-left: 50px;">
            <span class="">店铺名称／账号：</span>
            <el-input class="menu_input" v-model="value" style="width: 160px"></el-input>
          </div>
        </el-col>
        <el-col :span="12">
          <div>
            <span>店铺类型：</span>
            <!--<el-input class="menu_input" v-model="storeType" style="width: 50%"></el-input>-->
            <el-select v-model="storeType" placeholder="全部" class="menu-select">
              <el-option
                v-for="item in storeTypeArr"
                :key="item.value"
                :label="item.typeName"
                :value="item.typeId">
              </el-option>
            </el-select>
          </div>
        </el-col>
      </el-row>
      <el-row style="margin-top: 20px;">
        <el-col :span="12" style="padding-left: 50px; ">
          <div>
            <span>上下架状态：</span>
            <el-select v-model="throwingState" placeholder="全部" class="menu-select" style="margin-left: 28px;width: 160px;">
              <el-option
                v-for="item in Delivery_status"
                :key="item.value"
                :label="item.typeName"
                :value="item.typeId">
              </el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="12">
          <div>
            <el-button type="primary" style="width: 80px;" @click="resetData">重 置</el-button>
            <el-button type="primary" style="width: 80px;" @click="queryStore">查 询</el-button>
            <el-button type="primary" style="width: 80px;" @click="xzExcel">导出excel</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="content bgcolor1">
      <el-row class="c_title" :style="heightFlag?'':'padding: 0 20px 0 13px;'">
        <el-col :span="3"><span>店铺名称</span></el-col>
        <el-col :span="3"><span>店铺类型</span></el-col>
        <el-col :span="2"><span>姓名</span></el-col>
        <el-col :span="3"><span>账号</span></el-col>
        <el-col :span="5"><span>地址</span></el-col>
        <el-col :span="3"><span>营业时间</span></el-col>
        <el-col :span="2"><span>状态</span></el-col>
        <!--<el-col :span="2"><span>是否置顶</span></el-col>-->
        <el-col :span="3"><span>操作</span></el-col>
      </el-row>
      <div class="c-margin1" id="c-margin1" :style="screenWidth<1367?'height: 70%;':'height:90%;'">
        <div class="c-margin" id="c-margin">
          <el-row class="c-list" v-for="(item,index) in storePromotion" :key="index" id="list"
                  :style="index%2==0?'background-color: rgba(236,238,242,1);border-radius: 5px;':'border-radius: 5px;'">
            <el-col :span="3"><span>{{item.storeName?item.storeName:"无"}}</span></el-col>
            <el-col :span="3">
              <span v-if="item.storeIndustry==3"> 美食 </span>
              <span v-if="item.storeIndustry==4"> 果蔬生鲜 </span>
              <span v-if="item.storeIndustry==5"> 服饰丽人 </span>
              <span v-if="item.storeIndustry==6"> 母婴亲子 </span>
              <span v-if="item.storeIndustry==7"> 日杂便利 </span>
              <span v-if="item.storeIndustry==8"> 生活服务 </span>
              <span v-if="item.storeIndustry==9"> 医疗健康 </span>
              <span v-if="item.storeIndustry==10"> 家居服饰 </span>
              <span v-if="item.storeIndustry==11"> 房产中介 </span>
              <span v-if="item.storeIndustry==12"> 其他 </span>
            </el-col>
            <el-col :span="2"><span>{{item.contactsName}}</span></el-col>
            <el-col :span="3"><span>{{item.account?item.account:"无"}}</span></el-col>
            <el-col :span="5">
              <span style="white-space:normal;display: inline-block;width: 100%;">{{item.storeAddress}}</span>
              <!--<span v-if="item.storeAddress&&item.storeAddress.split('区')[1]">{{item.storeAddress.split('区')[1]}}</span>-->
              <!--<span v-if="(item.storeAddress&&!item.storeAddress.split('区')[1])||!item.storeAddress">无</span>-->
              <!--<span v-if="(item.storeAddress&&!item.storeAddress.split('区')[1])&&item.storeAddress">{{item.storeAddress}}</span>-->
            </el-col>
            <el-col :span="3"><span>{{item.openingHours?item.openingHours:'00:00'}}</span></el-col>
            <!--<el-col :span="2"><span>{{item.recommend}}</span></el-col>-->
            <el-col :span="2">
              <span v-if="!item.status">无</span>
              <span v-if="item.status==1">已上架</span>
              <span v-if="item.status==2">已下架</span>
              <span v-if="item.status==3">待上架</span>
            </el-col>
            <el-col :span="3">
              <div class="operation">
                <el-button v-if="item.status==1"
                           :style="item.status==1?'color: rgba(201,201,201,1)':'color: rgba(89,115,128,1)'" type="text"
                           :disabled="item.status==1?true:false"
                           @click="grounding(item)">
                  上架
                </el-button>
                <el-button v-if="item.status==2" style="color: rgba(89,115,128,1)" type="text"
                           @click="grounding(item)">
                  上架
                </el-button>
                <el-button v-if="item.status==3"
                           :style="item.status==3?'color: rgba(89,115,128,1)':'color: rgba(201,201,201,1)'" type="text"
                           :disabled="item.status==3?false:true"
                           @click="grounding(item)">
                  上架
                </el-button>
                <el-button v-if="item.status==2"
                           :style="item.status==2?'color: rgba(201,201,201,1)':'color: rgba(89,115,128,1)'" type="text"
                           :disabled="item.status==2?true:false"
                           @click="undercarriage(item)">
                  下架
                </el-button>
                <el-button v-if="item.status==1"
                           :style="item.status==1?'color: rgba(89,115,128,1)':'color: rgba(201,201,201,1)'" type="text"
                           :disabled="item.status==1?false:true"
                           @click="undercarriage(item)">
                  下架
                </el-button>
                <el-button v-if="item.status==3"
                           :style="item.status==3?'color: rgba(201,201,201,1)':'color: rgba(89,115,128,1)'" type="text"
                           :disabled="item.status==3?true:false"
                           @click="undercarriage(item)">
                  下架
                </el-button>
                <!--<span :class="item.status==1||item.status==3?'font_color1':'fontX'" @click="grounding(item)">上架</span>-->
                <!--<span :class="item.status==2?'fontX':'font_color1'" @click="undercarriage(item)">下架</span>-->
                <el-button :style="item.status==1?'color: rgba(255,135,97,1)':'color: rgba(201,201,201,1)'" type="text"
                           :disabled="item.status!=1?true:false"
                           @click="stickStore(item)">
                  置顶
                </el-button>
                <!--<span class="font_color3"  @click="stickStore(item)" v-if="item.status!=3">置顶</span>-->
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="block">
      <el-pagination
        style="float: right;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        layout=" prev, pager, next"
        :total="pageTotal*10">
      </el-pagination>
      <div style="float: right;">
        <span style="margin-top: 5px;display: inline-block">共 {{pageTotal}} 页</span>
        <span style="margin-left: 20px;margin-top: 10px;">共计{{sumNumber}}条</span>
      </div>
    </div>

  </div>
</template>
<script type="text/ecmascript-6">
  export default {
    data(){
      return {
        storeType:'全部',
        page: 0,
        pageTotal: 0,
        currentPage: 0,
        sumNumber: 0,
        value: "",
        stick: "",
        throwingState: "全部",
        heightFlag: false,
        screenWidth: document.body.clientWidth,
        stick_status: [
          {type: 0, typeId: "0", typeName: "全部"},
          {type: 1, typeId: "1", typeName: "是"},
          {type: 2, typeId: "2", typeName: "否"},
        ],
        Delivery_status: [
          {type: 0, typeId: "0", typeName: "全部"},
          {type: 1, typeId: "3", typeName: "待上架"},
          {type: 2, typeId: "1", typeName: "已上架"},
          {type: 3, typeId: "2", typeName: "已下架"},
        ],
        storeTypeArr: [
          {type: 0, typeId: "0", typeName: "全部"},
          {type: 3, typeId: "3", typeName: "美食"},
          {type: 4, typeId: "4", typeName: "果蔬生鲜"},
          {type: 5, typeId: "5", typeName: "服饰丽人"},
          {type: 6, typeId: "6", typeName: "母婴亲子"},
          {type: 7, typeId: "7", typeName: "日杂便利"},
          {type: 8, typeId: "8", typeName: "生活服务"},
          {type: 9, typeId: "9", typeName: "医疗健康"},
          {type: 10, typeId: "10", typeName: "家居服饰"},
          {type: 11, typeId: "11", typeName: "房产中介"},
          {type: 12, typeId: "12", typeName: "其他"},
        ],
        storePromotion: []
      }
    },
    methods: {
      //页码
      grounding(item){//上架
        this.$http.post(`${this.$store.state.path}stores/online?storeId=${item.storeId}&operatorStoreId=${this.$store.state.storeId}`)
          .then(res => {
            this.queryStore()
          }, res => {

          })
      },
      xzExcel(){
        let path = ``
        let status = this.throwingState
        if (this.throwingState) {
          if (this.throwingState == '全部') status = 0
          path += `&status=${status}`
        }
        if (!this.throwingState) {
          status = 0
          path += `&status=${status}`
        }
        if(this.storeType){
          if(this.storeType == '全部') path+=`&merchantType=0`
          if(this.storeType != '全部') path+=`&merchantType=${this.storeType}`
        }
        if(!this.storeType){
          path+=`&merchantType=0`
        }

        if (this.value) path += `&content=${this.value}`
        this.$store.state.loadingFlag = true
        window.open(`${this.$store.state.path}stores/community/filter/export?communityId=${this.$store.state.storeId}&page=${this.page}&size=10${path}`)
//        this.$http.get(`${this.$store.state.path}stores/community/filter/export?communityId=${this.$store.state.storeId}&page=${this.page}&size=10${path}`)//查询小区商户
//          .then(res => {
//           console.log(res.headers.map["content-type"])
//          }, res => {
//
//          })
      },
        undercarriage(item){//下架
        this.$http.delete(`${this.$store.state.path}stores/online?storeId=${item.storeId}&operatorStoreId=${this.$store.state.storeId}`)//
          .then(res => {
            this.queryStore()
          }, res => {

          })
      },
      handleCurrentChange(val) {
        this.page = val - 1
        this.queryStore()
      },
      handleSizeChange(){

      },
      stickStore(item){
        this.$http.put(`${this.$store.state.path}stores/stick?storeId=${item.storeId}&operatorStoreId=${this.$store.state.storeId}`)//
          .then(res => {
            this.queryStore()
          }, res => {

          })
      },
      resetData(){
        this.throwingState = ''
        this.value = this.stick = this.throwingState = this.storeType=``
      },
      queryStore(){
        let path = ``
        let status = this.throwingState
        if (this.throwingState) {
          if (this.throwingState == '全部') status = 0
          path += `&status=${status}`
        }
        if (!this.throwingState) {
          status = 0
          path += `&status=${status}`
        }
        if(this.storeType){
          if(this.storeType == '全部') path+=`&merchantType=0`
          if(this.storeType != '全部') path+=`&merchantType=${this.storeType}`
        }
        if(!this.storeType){
          path+=`&merchantType=0`
        }

        if (this.value) path += `&content=${this.value}`
        this.$store.state.loadingFlag = true
        this.$http.get(`${this.$store.state.path}stores/community/filter?communityId=${this.$store.state.storeId}&page=${this.page}&size=10${path}`)//查询小区商户
          .then(res => {
            this.$store.state.loadingFlag = false
            this.storePromotion = []
            if (res.body.result) {
              this.storePromotion = res.body.result.storeResponseDTOList;
              this.pageTotal = res.body.result.totalPage
              this.sumNumber = res.body.result.sumNumber
            }
            if (!res.body.result) {
              this.storePromotion = []
              this.pageTotal = 0
              this.sumNumber = 0
            }
          }, res => {

          })
      },
    },
    watch: {
      value(val, oldVal){
        if (oldVal && val.length == 0) {
          this.queryStore()
        }
      }
    },
    created(){
      this.queryStore()
    },
    mounted () {
      let contentHeight = document.getElementById('c-margin1').offsetHeight
      let lastListHeight = document.getElementById('c-margin').offsetHeight
      if (lastListHeight > contentHeight) {
        this.heightFlag = true
      } else {
        this.heightFlag = false
      }
    },
  }
</script>
<style scoped>


  .fontX {
    color: rgba(201, 201, 201, 1);
  }

  .storePromotion .el-button--primary {
    color: #fff;
    background-color: rgba(87, 189, 222, 1) !important;
    border-color: rgba(87, 189, 222, 1) !important;
  }

  .el-button--primary:focus, .el-button--primary:hover {
    background-color: #1dabd9 !important;
    border-color: #1dabd9 !important;
  }

  .operation span {
    display: inline-block;
    margin-left: 5px;
    cursor: pointer;
  }

  .bgcolor1 {
    background-color: #fff;
  }

  .storePromotion {
    font-family: MicrosoftYaHei;
    padding-left: 200px;
    background-color: #F5F5F5;
  }

  .storePromotion .top {
    height: 70px;
    line-height: 70px;
    background-color: #fff;
    font-size: 18px;
    color: #597380;
    border-bottom: 1px solid #D7D9DD;
  }

  .storePromotion .top span {
    display: inline-block;
    width: 150px;
    height: 100%;
    line-height: 70px;
    text-align: center;
    border-right: 1px solid #D7D9DD;
  }

  .storePromotion .menu {
    height: 150px!important;
    margin: 20px 20px 0 20px;
  }

  .storePromotion .content {
    margin: 20px 20px 0 20px;
    height: 63%;
    border-radius: 5px;
    border-left: 1px solid #D7D9DD;
    border-right: 1px solid #D7D9DD;
    border-bottom: 2px solid #D7D9DD;
  }

  .storePromotion .content .c_title {
    height: 50px;
    line-height: 50px;
    padding: 0 13px;
    text-align: center;
    border-radius: 5px;
    background-color: #57BDDE;
    color: #fff;
    font-size: 14px;
  }

  .storePromotion .content .c-margin1 {
    padding: 14px 13px;
    height: 90%;
    overflow: auto;
  }

  .storePromotion .content .c-list {
    line-height: 40px;
    text-align: center;
    color: #597380;
    font-size: 12px;
  }
</style>
